<template>
  <div class="role-selection-container">
  

    <!-- 主题图片 -->
    <div class="topic-image-container">
      <img src="/topic.png" alt="记账主题" class="topic-image" />
    </div>

    <!-- 角色选择区域 -->
    <div class="card-container" :class="{'mobile-view': isMobile}">
      <!-- 男性角色卡片 -->
      <div
          class="role-card male-card"
          :class="{'selected': selectedRole === 'man'}"
          @click="selectRole('man')"
      >
        <div class="card-icon">
          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
            <circle cx="50" cy="36" r="22" fill="none" :stroke="selectedRole === 'man' ? '#3498DB' : '#A0AEC0'" stroke-width="2"/>
            <path d="M50 60v30M35 85h30M65 25l15-15M80 25h-15" fill="none" :stroke="selectedRole === 'man' ? '#3498DB' : '#A0AEC0'" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </div>
        <p class="role-label" :class="{'selected': selectedRole === 'man'}">Jun</p>
      </div>

      <!-- 女性角色卡片 -->
      <div
          class="role-card female-card"
          :class="{'selected': selectedRole === 'female'}"
          @click="selectRole('female')"
      >
        <div class="card-icon">
          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
            <circle cx="50" cy="36" r="22" fill="none" :stroke="selectedRole === 'female' ? '#FF7E92' : '#A0AEC0'" stroke-width="2"/>
            <path d="M50 58v26M35 76h30M50 58l-15 15M50 58l15 15" fill="none" :stroke="selectedRole === 'female' ? '#FF7E92' : '#A0AEC0'" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </div>
        <p class="role-label" :class="{'selected': selectedRole === 'female'}">Xing</p>
      </div>
    </div>

    <!-- 确认按钮 -->
    <button
        class="confirm-button"
        :class="{
        'disabled': !selectedRole,
        'male-selected': selectedRole === 'man',
        'female-selected': selectedRole === 'female'
      }"
        :disabled="!selectedRole"
        @click="confirmSelection"
    >
      开始使用
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const selectedRole = ref(null);
const isMobile = ref(window.innerWidth <= 480);

const selectRole = (role) => {
  selectedRole.value = role;
};

const confirmSelection = () => {
  if (!selectedRole.value) return;

  // 根据角色设置userId
  const userId = selectedRole.value === 'man' ? 1 : 2;
  localStorage.setItem('userId', userId.toString());

  // 立即应用主题
  if (userId === 1) {
    document.body.classList.remove('theme-female');
    document.body.classList.add('theme-male');
  } else {
    document.body.classList.remove('theme-male');
    document.body.classList.add('theme-female');
  }

  // 添加页面离开动画，然后导航
  document.querySelector('.role-selection-container').classList.add('fade-out');
  setTimeout(() => {
    router.push('/main/home');
  }, 500);
};

// 响应式处理
const handleResize = () => {
  isMobile.value = window.innerWidth <= 480;
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
  // 页面进入动画
  setTimeout(() => {
    document.querySelector('.role-selection-container').classList.add('loaded');
  }, 100);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
/* 基础变量定义 */
:root {
  /* 通用色彩 */
  --bg-color: #F5F8FF;
  --text-color: #333333;
  --card-bg: #FFFFFF;
  --shadow-color: rgba(0, 0, 0, 0.08);

  /* 男性主题色 */
  --male-primary: #3498DB;
  --male-gradient: linear-gradient(135deg, #74EBD5, #9FACE6);
  --male-secondary: #2980B9;
  --male-accent: #1E3A8A;

  /* 女性主题色 */
  --female-primary: #FF7E92;
  --female-gradient: linear-gradient(135deg, #FFAFBD, #FFC3A0);
  --female-secondary: #A0EACD;
  --female-accent: #D53F8C;
}

/* 页面容器 */
.role-selection-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px;
  background-color: var(--bg-color);
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
  transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.role-selection-container.loaded {
  opacity: 1;
  transform: translateY(0);
}

.role-selection-container.fade-out {
  opacity: 0;
  transform: translateY(-20px);
}

/* 品牌区域 */
.brand-area {
  margin-bottom: 20px;
}

.logo {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #74EBD5, #9FACE6, #FFAFBD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  padding: 10px;
  border-radius: 8px;
}

/* 主题图片区域 */
.topic-image-container {
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.topic-image {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.topic-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 标题区域 */
.title-area {
  text-align: center;
  margin-bottom: 36px;
}

.main-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.subtitle {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  margin: 0;
  line-height: 1.5;
}

/* 卡片容器 */
.card-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 36px;
  width: 100%;
  max-width: 768px;
}

/* 角色卡片基础样式 */
.role-card {
  width: 200px;
  height: 270px;
  background: var(--card-bg);
  border: 1px solid #E0E6ED;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease-out;
  padding: 20px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
}

/* 卡片图标区域 */
.card-icon {
  margin-bottom: 20px;
  transition: transform 0.3s ease-out;
}

/* 角色标签 */
.role-label {
  font-size: 18px;
  font-weight: 500;
  color: #777777;
  margin: 0;
  transition: color 0.3s ease-out;
}

/* 男性卡片悬停状态 */
.male-card:hover {
  box-shadow: 0px 6px 24px rgba(52, 152, 219, 0.2);
  transform: translateY(-5px);
}

/* 女性卡片悬停状态 */
.female-card:hover {
  box-shadow: 0px 6px 24px rgba(255, 126, 146, 0.2);
  transform: translateY(-5px);
}

/* 男性卡片选中状态 */
.male-card.selected {
  border: 2px solid var(--male-primary);
  background: linear-gradient(135deg, rgba(116, 235, 213, 0.15), rgba(159, 172, 230, 0.15));
  box-shadow: 0px 8px 28px rgba(52, 152, 219, 0.25);
  transform: scale(1.05);
}

.male-card.selected .role-label {
  color: var(--male-primary);
}

/* 女性卡片选中状态 */
.female-card.selected {
  border: 2px solid var(--female-primary);
  background: linear-gradient(135deg, rgba(255, 175, 189, 0.15), rgba(255, 195, 160, 0.15));
  box-shadow: 0px 8px 28px rgba(255, 126, 146, 0.25);
  transform: scale(1.05);
}

.female-card.selected .role-label {
  color: var(--female-primary);
}

/* 确认按钮 */
.confirm-button {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
  text-align: center;
}

/* 禁用状态 */
.confirm-button.disabled {
  background-color: #E2E8F0;
  color: #A0AEC0;
  cursor: not-allowed;
}

/* 男性选中状态 */
.confirm-button.male-selected {
  background: linear-gradient(135deg, #74EBD5, #9FACE6);
  color: white;
  box-shadow: 0px 4px 12px rgba(52, 152, 219, 0.3);
}

.confirm-button.male-selected:hover {
  filter: brightness(1.05);
  box-shadow: 0px 6px 16px rgba(52, 152, 219, 0.4);
}

/* 女性选中状态 */
.confirm-button.female-selected {
  background: linear-gradient(135deg, #FFAFBD, #FFC3A0);
  color: white;
  box-shadow: 0px 4px 12px rgba(255, 126, 146, 0.3);
}

.confirm-button.female-selected:hover {
  filter: brightness(1.05);
  box-shadow: 0px 6px 16px rgba(255, 126, 146, 0.4);
}

/* 响应式设计: 平板视图 */
@media (max-width: 768px) {
  .role-selection-container {
    padding: 32px;
  }

  .card-container {
    gap: 24px;
  }

  .role-card {
    width: 170px;
    height: 240px;
  }

  .topic-image {
    max-width: 320px;
  }
}

/* 响应式设计: 移动视图 */
@media (max-width: 480px) {
  .role-selection-container {
    padding: 24px;
    justify-content: flex-start;
    padding-top: 60px;
  }

  .card-container.mobile-view {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .role-card {
    width: 100%;
    max-width: 300px;
    height: 180px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
    padding: 20px;
  }

  .card-icon {
    margin-bottom: 0;
  }

  .main-title {
    font-size: 24px;
  }

  .topic-image-container {
    margin-bottom: 24px;
  }

  .topic-image {
    max-width: 280px;
    border-radius: 12px;
  }
}
</style>